<template>
  <div id="details">
    <Header title="详情" leftIcon="add-o" @onClickRight="onClickRight" />
    <div class="container">
      <div
        class="module"
        v-for="(item, index) in this.$store.state.sendList"
        :key="index"
      >
        <div class="table">
          <van-icon
            v-if="index > 0"
            size="20"
            @click="deleteAction(index)"
            class="delete-icon"
            name="delete"
            color="#3A73F6"
          />

          <div class="table-row">
            <span>车牌号</span>
            <span>所属部门</span>
            <span>车型</span>
          </div>
          <div
            class="table-row"
            @click="select(0, index)"
            v-if="!item.carList.car_num"
          >
            <span class="add-button">点击添加</span>
            <span></span>
            <span></span>
          </div>
          <div v-else class="table-row" @click="select(0, index)">
            <span>{{ item.carList.car_num }}</span>
            <span>{{item.carList.car_dept_name}}</span>
            <span>{{ item.carList.car_type_name }}</span>
          </div>
          <div class="table-row">
            <span>驾驶员</span>
            <span>所属部门</span>
            <span>联系方式</span>
          </div>
          <div
            class="table-row"
            @click="select(1, index)"
            v-if="!item.driverList.user_name"
          >
            <span class="add-button">点击添加</span>
            <span></span>
            <span></span>
          </div>
          <div v-else class="table-row" @click="select(1, index)">
            <span>{{ item.driverList.user_name }}</span>
            <span>{{ item.driverList.deptName }}</span>
            <span>{{ item.driverList.user_phone }}</span>
          </div>
        </div>
      </div>
      <van-button
        @click="checkPost"
        type="primary"
        size="large"
        color="#3A73F6"
        >确定派车</van-button
      >
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import { Toast } from "vant";

export default {
  name: "Details",
  data() {
    return {
      show: false,
      reason: "",
      apply: {},
     selectIndex:0
    };
  },
  mounted() {

  },

  methods: {
    checkPost(){
        let sendList=this.$store.state.sendList
       this.$http
        .get("/carorder/judgeCarDriverTask", {
          carId:sendList[0].carList.id,
          driverId:sendList[0].driverList.id,
          startTime:this.$route.query.endTime,
          endTime:this.$route.query.endTime
        })
        .then((result)=>{
          //3：车辆和驾驶员未归队
         // 2：驾驶员未归队
         // 1：车辆未归队
         // 0：代表可以派车，不提示
        //  switch()
        console.log(result)
        // Dialog.confirm({
        //      title: "",
        //      message: "是否受理通过？",
        //  })
        // .then(() => {})
        //    console.log(result)
       })
    },
    //确认提交
    sendCarsAction(){
        let driverArr=[];
        let sendList=this.$store.state.sendList
        if(sendList.length>0){
           sendList.map(item=>{
              if(item.carList.id&&item.driverList.id){
                  driverArr.push(item.carList.id+"_"+item.driverList.id)
              }
                 
           })
        }
        console.log(driverArr)
        if(driverArr.length<=0){
           Toast("请选择车辆");
           return;
        }
        this.$http
        .get("/carorder/dispatcherCar", {
          userId: localStorage.getItem("userId"),
          applyId: this.$route.query.id,
          driverCarId:driverArr.join(","),
        })
        .then((result) => {
          this.$store.commit({
            type:'removeSendList',
          })
          console.log(result);
          Toast(result.message);
          this.$router.go(-2);
        }).catch(e=>{
           this.$store.commit({
            type:'removeSendList',
           })
           Toast("派车失败，请稍后重试");
           console.log(e)
        });
    },
    //删除选择车辆
    deleteAction(index){
        this.$store.commit({
          type:'deteleSendList',
          index
      })
    },
    //选择车辆
    select(type,index){
       this.selectIndex=index
       this.$router.push({ path: '/sendCarsSelect', query: { type,index }})
    },
    //添加派车
    onClickRight(){

      this.$store.commit({
          type:'addSendList',
      })
    }
  },
  components: {
    Header: Header,
  },
};
</script>

<style scoped>
.container {
  padding: 20px 20px 140px 20px;
}
.module {
  margin-bottom: 20px;
}
.table {
  position: relative;
  padding: 0 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 40px 0px rgba(120, 120, 120, 0.22);
  border-radius: 12px;
}
.delete-icon {
  position: absolute;
  right: 10px;
  top: 10px;
}
.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}
.table-row span {
  width: 33.33%;
  padding: 36px;
  font-size: 26px;
  color: rgba(51, 51, 51, 1);

  line-height: 30px;
}
.table-row span.add-button {
  color: #3a73f6;
}
</style>
